<template>
  <div class="basiclayout-app-card">
    <a-tooltip
      placement="top"
      :mouseLeaveDelay="0"
      :destroyTooltipOnHide="true"
      overlayClassName="app-card-tooltip">
      <template #title>
        <span>{{ title }}</span>
      </template>
      <a-card hoverable>
        <template #cover>
          <div style="width: 92px; height: 57px">
            <a-row type="flex" justify="space-around" align="middle" style="height: 100%">
              <a-col style="width: 45px; height: 45px;">
                <q-svg :icon-class="svgName" style="width: 100%;height:100%;"></q-svg>
              </a-col>
            </a-row>
          </div>
        </template>
        <a-row type="flex" justify="space-around" align="middle" style="height: 100%">
          <a-col>
            <span>{{ nameFilter(title) }}</span>
          </a-col>
        </a-row>
      </a-card>
    </a-tooltip>

  </div>
</template>

<script>
  import QSvg from '@/components/QSvg/QSvg'
  export default {
    name: 'AppCard',
    components: {
      QSvg
    },
    computed: {
      svgName () {
        if (!this.$store.getters.getModuleSvg.includes(this.name)) {
          return 'default'
        }
        return `${this.name}`;
      }
    },
    props:{
      title: {
        type: String,
        required: true
      },
      name: {
        type: String,
        required: true
      }
    },
    methods: {
      nameFilter (val) {
        if (val) {
          return val.length > 4 ? val.substring(0,4) + '...' : val
        } else {
          return ''
        }
      }
    }
  };
</script>

<style lang="less" scoped>
  .basiclayout-app-card{
    width: 92px;
    height: 92px;
    display: inline-block;
    margin-top: 5px;
    margin-right: 15px;
    margin-bottom: 10px;
    :deep(.app-card-tooltip) {
      .ant-tooltip-inner {
        border-radius: 8px;
      }
    }
    :deep(.ant-card) {
      width: 100%;
      height: 100%;
      border: 0;
      .ant-card-cove {
        height: 57px!important;
      }
      .ant-card-body {
        height: 35px!important;
      }
    }
    .ant-card-hoverable:hover {
      background: #f0f2f5;
      border-radius: 10px;
    }
  }

</style>
